<template>
  <div>
    <!-- 精选题库 -->
    <div class="box-card">
      <div class="box-header">
        <div class="box-top">
          <div>说明：目前支持学科和关键字条件筛选</div>
          <el-button
            type="success"
            class="header-right"
            @click="$router.push('/questions/new')"
            ><i class="el-icon-edit"></i> 新增试题</el-button
          >
        </div>
        <el-form :model="form" ref="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in subject"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="form.catalogID"
                  placeholder="请选择"
                  style="width: 250px"
                >
                 <el-option label="无数据" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  v-model="form.tags"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option label="无数据" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="根据题干搜索"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="form.questionType"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option label="单选" :value="1"></el-option>
                  <el-option label="多选" :value="2"></el-option>
                  <el-option label="简答" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  v-model="form.difficulty"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option label="简单" :value="1"></el-option>
                  <el-option label="一般" :value="2"></el-option>
                  <el-option label="困难" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  v-model="form.direction"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="form.creatorID"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in user"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  v-model="form.remarks"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  v-model="form.shortName"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-select
                  placeholder="请选择"
                  v-model="form.provinces"
                  @change="handleProvince"
                  style="width: 120px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  placeholder="请选择"
                  v-model="form.city"
                  style="width: 120px"
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="cols">
              <el-button class="header-btn cols-btn" @click="clearInput"
                >清空</el-button
              >
              <el-button type="primary" class="header-btn" @click="searchInput"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="已审核" name="2"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
      </el-tabs>
      <!-- 内容 -->
      <div class="container">
        <div class="header-content">
          <i class="el-icon-info"></i>
          <span>数据一共{{ total }}条</span>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#f4f4f5' }"
        >
          <el-table-column
            prop="number"
            label="试题编号"
            align="center"
            width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            align="center"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="catalog" label="目录" align="center">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" align="center">
            <template #default="{ row }">
              <span>{{
                row.questionType === '1'
                  ? '单选'
                  : row.questionType === '2'
                  ? '多选'
                  : '简答'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            align="center"
            width="200px"
          >
            <template #default="{ row }"
              ><span v-html="row.question"></span
            ></template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            align="center"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" align="center">
            <template #default="{ row }">
              <span>{{
                row.difficulty === '1'
                  ? '简单'
                  : row.difficulty === '2'
                  ? '一般'
                  : '困难'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" align="center">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" align="center">
            <template #default="{ row }">
              <span>{{
                row.chkState === 0
                  ? '待审核'
                  : row.chkState === 1
                  ? '已审核'
                  : '已拒绝'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" align="center">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" align="center">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" align="center">
            <template #default="{ row }">
              <span>{{
                row.publishState === 1
                  ? '待发布'
                  : row.publishState === 2
                  ? '已发布'
                  : '已下架'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250px" fixed="right">
            <template #default="{ row }">
              <el-button type="text" @click="openDialog(row)">预览</el-button>
              <el-button
                type="text"
                :disabled="row.chkState ? true : false"
                @click="showDialog(row.id)"
                >审核</el-button
              >
              <el-button
                type="text"
                :disabled="!row.publishState"
                 @click="$router.push(`/questions/new/${row.id}`)"
                >修改</el-button
              >
              <el-button
                v-if="row.publishState"
                type="text"
                @click="changeStates('use', row)"
                >上架</el-button
              >
              <el-button v-else type="text" @click="changeStates('no', row)"
                >下架</el-button
              >
              <el-button
                type="text"
                @click="open(row)"
                :disabled="!row.publishState"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagesize"
          :total="total"
          layout="prev,pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
      <!-- 预览弹出框 -->
      <questionsPreviews
        :dialogFormVisible.sync="dialogFormVisible"
        :info="info"
      ></questionsPreviews>
    </div>
    <!-- table -->

    <!-- 审核弹出框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="falg"
      width="30%"
      @close="closeDialog"
    >
      <el-form :model="forms" ref="forms" :rules="rules" label-width="80px">
        <el-radio v-model="forms.chkState" :label="1">通过</el-radio>
        <el-radio v-model="forms.chkState" :label="2">拒绝</el-radio>
        <el-form-item class="textarea">
          <el-input
            type="textarea"
            v-model="forms.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="suggest">确认</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  choice,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { direction } from '@/api/hmmm/constants.js'
import { userSimple } from '@/api/base/users.js'
import questionsPreviews from '../components/questions-preview.vue'
// import questionsChoick from '../components/questions-table.vue'
export default {
  components: {
    questionsPreviews
    // questionsChoick
  },
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      form: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      dialogFormVisible: false,
      id: '',
      citySelect: {
        province: [],
        cityDate: []
      },
      subject: '',
      direction: direction,
      user: '',
      info: '',
      activeName: '0',
      forms: {
        chkState: 1,
        chkRemarks: ''
      },
      rules: {
        desc: [{ required: true, message: '请输入审核意见', trigger: 'blur' }]
      },
      falg: false
    }
  },

  async created () {
    this.initTable(null)
    this.getCityData()
    // 学科
    const { data } = await simple()
    console.log(data)
    this.subject = data
    // 录入人
    const datas = await userSimple()
    console.log(datas)
    this.user = datas.data
  },

  methods: {
    handleClick (tab, event) {
      console.log(tab.index)
      if (tab.index === '0') {
        this.initTable(null)
      } else if (tab.index === '1') {
        this.initTable(0)
      } else if (tab.index === '2') {
        this.initTable(1)
      } else if (tab.index === '3') {
        this.initTable(2)
      }
    },
    // 清空表单内容
    clearForm () {
      this.forms = {
        chkState: 1,
        chkRemarks: ''
      }
    },
    // 对话框取消按钮
    closeDialog () {
      this.clearForm()
      this.$refs.forms.resetFields()
      this.falg = false
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.form.city = this.citySelect.cityDate[0]
    },
    async initTable (index) {
      const { data } = await choice({
        page: this.page,
        pagesize: this.pagesize,
        chkState: index
      })
      console.log(data)
      data.items = data.items.map(item => {
        item.addDate = this.$moment(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        return item
      })
      this.tableData = data.items
      this.total = data.counts
    },
    // pagesize改变时
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.initTable(null)
    },
    // page改变时
    handleCurrentChange (val) {
      this.page = val
      this.initTable(null)
    },
    // 清空input
    clearInput () {
      Object.keys(this.form).forEach(item => {
        this.form[item] = null
      })
      this.initTable()
    },
    // 搜索input
    async searchInput () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        ...this.form
      })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      // this.initTable(null)
    },
    // 点击新增用户按钮
    async openDialog (row) {
      const { data } = await detail(row)
      console.log(data)
      this.info = data
      this.dialogFormVisible = true
    },
    // 删除 取消确认按钮
    open (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发删除请求
          await remove(row)
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })
        })
    },
    // 上架 下架
    changeStates (type, row) {
      this.id = row.id
      if (type === 'use') {
        this.$confirm('你确定上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            row.publishState = 0
            await choicePublish(row)
            this.initTable()
            this.$message.success('上架成功')
          })
          .catch(() => {
            this.$message.success('已取消操作!')
          })
      } else if (type === 'no') {
        this.$confirm('你确定下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            row.publishState = 1
            await choicePublish(row)
            this.initTable()
            this.$message.success('下架成功')
          })
          .catch(() => {
            this.$message.success('已取消操作!')
          })
      }
    },
    // 审核
    showDialog (id) {
      this.id = id
      this.falg = true
    },
    // 审核弹出框确认按钮
    async suggest () {
      const data = await choiceCheck({ ...this.forms, id: this.id })
      console.log(data)
      if (this.forms.chkState === 1) {
        this.tableData.find(item => item.id === this.id).chkState = 1
      } else if (this.forms.chkState === 2) {
        this.tableData.find(item => item.id === this.id).chkState = 2
      }
      this.closeDialog()
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  .box-header {
    .box-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      div {
        font-size: 12px;
        color: pink;
      }
    }
    .cols {
      .cols-btn {
        margin-left: 60px;
      }
    }
  }
}
.header-content {
  background-color: #f4f4f5;
  color: #909399;
  font-size: 13px;
  padding-left: 8px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  .el-icon-info {
    margin-right: 5px;
  }
}
.el-pagination {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}
.el-dialog {
  .el-form {
    width: 400px;
    margin: auto;
    .textarea {
      margin-left: -79px;
      margin-top: 30px;
      width: 410px;
      height: 35px;
    }
    .dialog-footer {
      margin-top: 40px;
      text-align: center;
      margin-right: -20px;
    }
  }
}
</style>
